<template>
  <div class="user">
    <u-navbar :is-back="false" title="我的" :is-fixed="true"
              :background="{background: '#255785'}"
              title-color="#fff" :border-bottom="false">
      <view class="slot-wrap">
        <view class="navbar-right">
          <view class="message-box right-item" @click="jump('pages/user/news')">
            <u-badge :is-dot="true" type="error" is-center :count="unReadNumber"></u-badge>
            <u-icon name="chat" size="40" color="#fff"></u-icon>
          </view>
        </view>
      </view>
    </u-navbar>
    <div v-if="loginFlag" class="top-container row cont-center">
      <image src="../../static/img/user_bg.png" class="bg_img"></image>
      <div class="head-portrait mg_l_30"><img :src="avatar" class="avatar"/></div>
      <div class="pd_l_30 flex-1">
        <div class="row cont-center pd_b_10 pd_r_30">
          <div class="font-28 col-fff flex-1">
            <span class="font-32 font-b pd_r_10">{{list.nickName}}</span>
            {{list.phonenumber}}
            <span v-if="list.userType == 1" class="flex-1"></span>
            <span v-if="list.userType == 2" class="flex-1 current-state col-fff bg-21B100 font-22 text-cent">推广员</span>
            <span v-if="list.userType == 3" class="flex-1 current-state col-fff bg-21B100 font-22 text-cent">顾问</span>
          </div>
          <u-icon @click="jump('/pages/user/userinfo')" name="setting" size="40" color="#fff"></u-icon>
          <!--<div class="iconfont icon-shezhi font-40 col-fff"
               onclick="$App.openWindow('html/userCenter/account_information')"></div>-->
        </div>
        <div class="font-24 col-fff pd_b_10 eclipse-1" style="width: 500upx">{{list.introduction?list.introduction:'这个人很懒 什么都没有写'}}</div>
        <div v-if="isTest" class="font-22 col-fff closing-date text-cent"><span
            class="font-20 font-b pd_r_10">测评服务截止日期</span>{{isTestTiem}}
        </div>
      </div>
    </div>
    <div v-else class="top-container row cont-center">
      <image src="../../static/img/user_bg.png" class="bg_img"></image>
      <div class="head-portrait mg_l_30" onclick="$App.openWindow('html/userCenter/account_information')">
        <img :src="avatar" class="avatar"/></div>
      <div class="pd_l_30 flex-1">
        <div class="row cont-center pd_b_10 pd_r_30">
          <div class="font-28 col-fff flex-1">
            <span class="font-36 font-b pd_r_10" onclick="$App.openWindow('html/userCenter/account_information')">
              登录/注册
            </span>
          </div>
          <u-icon @click="jump('/pages/user/userinfo')" name="setting" size="40" color="#fff"></u-icon>
          <!--<div class="iconfont icon-shezhi font-40 col-fff"
               onclick="$App.openWindow('html/userCenter/account_information')"></div>-->
        </div>
        <div class="font-28 col-fff flex-1" onclick="$App.openWindow('html/userCenter/account_information')"><span
            class="font-32 pd_r_10">登录注册后使用更多功能</span></div>
      </div>
    </div>
    <div style="background: #F7F7F7;">
      <div class="bg-fff pd_l_30 pd_r_30">
        <navigator url="/pages/user/wallet" class="row cont-center pd_t_50 pd_b_45 yh_bd_bottom">
          <div class="icon-container"><img src="../../static/img/wallet-icon.png"/></div>
          <div class="font-30 col-333 flex-1 pd_l_30">我的钱包</div>
          <div v-if="list.currentMoney" class="font-30 col-333 pd_r_30">可提现{{list.currentMoney}}元</div>
          <div class="iconfont icon-arrow-right-bold col-DBDBDB"></div>
        </navigator>
        <navigator url="/pages/user/order" class="row cont-center pd_t_50 pd_b_45 yh_bd_bottom">
          <div class="icon-container"><img src="../../static/img/order-icon.png"/></div>
          <div class="font-30 col-333 flex-1 pd_l_30">我的订单</div>
          <div class="iconfont icon-arrow-right-bold col-DBDBDB"></div>
        </navigator>
        <navigator url="/pages/user/coupon" class="row cont-center pd_t_50 pd_b_45 yh_bd_bottom">
          <div class="icon-container" style="width: 52upx;height: 55upx;padding-right: 6upx;box-sizing: content-box"><img src="../../static/img/coupon.png"/></div>
          <div class="font-30 col-333 flex-1 pd_l_30">优惠券</div>
          <div class="iconfont icon-arrow-right-bold col-DBDBDB"></div>
        </navigator>
        <navigator url="/pages/report/index" class="row cont-center pd_t_50 pd_b_45 yh_bd_bottom">
          <div class="icon-container" style="padding: 1px"><img src="../../static/img/baogao.png"/></div>
          <div class="font-30 col-333 flex-1 pd_l_30">我的报告</div>
          <div class="iconfont icon-arrow-right-bold col-DBDBDB"></div>
        </navigator>
        <navigator url="/pages/user/achievement" class="row cont-center pd_t_50 pd_b_45 yh_bd_bottom">
          <div class="icon-container"><img src="../../static/img/achievement-icon.png"/></div>
          <div class="font-30 col-333 flex-1 pd_l_30">我的成绩</div>
          <div class="iconfont icon-arrow-right-bold col-DBDBDB"></div>
        </navigator>
        <navigator url="/pages/user/news" class="row cont-center pd_t_50 pd_b_45">
          <div class="icon-container"><img src="../../static/img/news-icon.png"/></div>
          <div class="font-30 col-333 flex-1 pd_l_30">我的消息</div>
          <div class="iconfont icon-arrow-right-bold col-DBDBDB"></div>
        </navigator>
      </div>
      <div v-if="list.userType == 2" class="bg-fff pd_l_30 pd_r_30 mg_t_10">
        <!-- <div  class="bg-fff pd_l_30 pd_r_30 mg_t_10"> -->
        <navigator url="/pages/user/invitation" class="row cont-center pd_t_50 pd_b_45">
          <div class="icon-container"><img src="../../static/img/extension-icon.png"/></div>
          <div class="font-30 col-333 flex-1 pd_l_30">我的推广</div>
          <div class="iconfont icon-arrow-right-bold col-DBDBDB"></div>
        </navigator>
      </div>
      <div class="bg-fff pd_l_30 pd_r_30 mg_t_10">
        <navigator url="/pages/user/adviser?title=1" class="row cont-center pd_t_50 pd_b_45 yh_bd_bottom">
          <div class="icon-container"><img src="../../static/img/adviser-icon.png"/></div>
          <div class="font-30 col-333 flex-1 pd_l_30">测评顾问</div>
          <div class="iconfont icon-arrow-right-bold col-DBDBDB"></div>
        </navigator>
        <navigator url="/pages/user/feedback" class="row cont-center pd_t_50 pd_b_45">
          <div class="icon-container"><img src="../../static/img/feedback-icon.png"/></div>
          <div class="font-30 col-333 flex-1 pd_l_30">意见反馈</div>
          <div class="iconfont icon-arrow-right-bold col-DBDBDB"></div>
        </navigator>
      </div>
    </div>
  </div>
</template>

<script>
  import {request} from "../../util/api";
  import mixins from "../explore/mixins";

  export default {
    mixins: [mixins],
    data() {
    	return {
    		list: {},
				isTest: false,
				unReadNumber: '',
				isTestTiem: '',
				avatar: '../../static/img/photo.png'
      }
    },
    onShow() {
    	this.getCurrentUser()
      this.buyDetail();
			this.getUnReadNumber();
    },

    onPullDownRefresh() {
      this.getCurrentUser()
      this.buyDetail();
			this.getUnReadNumber();
    },

    methods: {
    	getCurrentUser() {
		    request({
			    url: '/app/userCenter/getLoginUserInfo'
		    }).then(ret => {
			    this.list = ret.data;
			    if (ret.data && ret.data.avatar) {
				    this.avatar = ret.data.avatar;
			    } else {
				    this.avatar = "../../image/photo.png";
			    }
			    let storage = uni.getStorageSync('zbz_user');
			    storage.userId = ret.data.userId
          uni.setStorageSync('zbz_user', storage);
		    })
	    },
      jump(path) {
        this.$u.route({
          url: path
        })
      },
      getUnReadNumber: function() {
	      request({
		      url: '/app/userCenter/getUnReadNumber'
	      }).then(ret => {
	      	this.unReadNumber = '';
          if (ret.data) {
            this.unReadNumber = ret.data;
          }
			    uni.stopPullDownRefresh();
        })
			},
      buyDetail: function() {
        request({
          url: '/app/goods/buyDetail'
        }).then(ret => {
          if (ret.data.isBuy) {
              this.isTestTiem = ret.data.endTestDate;
              this.isTest = true;
            } else {
              this.isTest = false;
            }
        })
      },
    },

    onShareAppMessage(res) {}
  }
</script>

<style scoped lang="scss">
  .user {
    .top-container {
      width: 100%;
      height: 260upx;
      display: flex;
      align-items: center;
      position: relative;
      .bg_img {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
      .avatar {
        width: 144upx;
        height: 144upx;
        border-radius: 100%;
      }
    }
    .icon-container {
      width: 60upx;
      height: 60upx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .bg-21B100 {
      background: #21B100;
      margin-left: 10upx;
      border-radius: 20upx;
      padding: 0 10upx;
    }
  }


  .navbar-right {
    margin-right: 24rpx;
    display: flex;
  }

  .right-item {
    margin: 0 20rpx;
    position: relative;
    display: flex;
  }

  .closing-date {
    width: 350upx;
    height: 48upx;
    line-height: 48upx;
    border-radius: 24upx;
    background: #2A6AAA;
    text-align: center;
  }
</style>
